﻿@{
    ViewBag.Title = "DanhSachSanPhamTinHoc";
    Layout = "~/Views/MasterPage/Main.cshtml";
}

<h4>Danh sách sản phẩm</h4>

<nav class="tab-list">
        @Html.ActionLink("Điện thoại di động", "DanhSach", null, new { @class = "tab" })
        @Html.ActionLink("Thiết bị tin học", "DanhSachSanPhamTinHoc", null, new { @class = "active tab" })
        @Html.ActionLink("Thêm mới sản phẩm", "ThemMoi", null, new { @class = "tab" })
</nav>

<table class="order-list">
        <caption>
            <div class="search">
			    <input placeholder="TÌM KIẾM" type="search" class="search-box">
                <i class="icon-search"></i>
			</div>
        </caption>
		<colgroup>
			<col width="5%">
			<col width="15%">
			<col width="10%">
			<col width="20%">
			<col width="*">
            <col width="5%">
		</colgroup>
		<thead>
		    <tr> 
			    <th>STT</th>
			    <th>Tên sản phẩm</th>
			    <th>Giá</th>
			    <th>Hình ảnh</th>
                <th>Chi tiết</th>
                <th></th>
		    </tr>
		</thead>
		<tbody>
        @{
            int i = 1;
            foreach (var sanPham in ViewBag.DanhSachSanPhamTinHocs)
            {
                <tr data-id="@sanPham.id" class="i-row">
                    <td>@i</td>
                    <td>@sanPham.tenSanPham</td>
                    <td>@sanPham.giaSanPham</td>
                    <td><img src="@sanPham.image"/></td>
                    <td>@sanPham.thongTinChiTiet</td>
                    <td><button>Update</button></td>
                </tr>
                i = i + 1;
            }
        }
        </tbody>
	</table>
<script>
    $('.order-list .icon-search').click(function () {
        var keyword = $('.order-list .search-box').val();
        if (keyword) {
            $('.order-list .i-row').each(function (index, value) {
                if ($(value).find('td').eq(1).text().toLowerCase().indexOf(keyword.toLowerCase()) === -1) {
                    $(value).addClass('hidden');
                }
            });
        } else {
            $('.order-list .i-row').each(function (index, value) {
                $(value).removeClass('hidden');
            });
        }
    });
</script>